<template>
  <div>
    <div id="bjt" class="site-footer">
          <!-- 首页轮播图1-->
    <van-swipe class="my-swipe" :autoplay="3500" indicator-color="white" :show-indicators='false'>
      <van-swipe-item  v-for="(item,index) in slideshow" :key="index">
        <router-link :to="'/desc?id='+item.id">
          <img :src="/pic&video/ + item.pic" alt="" style="width:100%;"><p style="margin:0;color:#fff">{{item.title}}</p>
        </router-link>
        
        </van-swipe-item>
  </van-swipe>

  <!-- 倒计时 -->
  <van-count-down :time="time">
  <template #default="timeData" >
    <div class="span_right">
         <img src="/pic&video/jslogo.png" alt="" class="bimg">
     <div>
      <span class="block">{{ timeData.days }}</span>
      <span class="colon">|</span>
      <span class="block">{{ timeData.hours }}</span>
      <span class="colon">|</span>
      <span class="block">{{ timeData.minutes }}</span>
      <span class="colon">|</span>
      <span class="block">{{ timeData.seconds }}</span>
     </div>
    </div>
  </template>
</van-count-down>

  <!-- 详细安排 -->
  <template>
  <van-row gutter="10" style="padding:10px">
    <router-link to="#" >
      <van-col span="8"><img src="/pic&video/01_bj.png" alt="" style="width:100%"></van-col>
    </router-link>
    <router-link to="#">
      <van-col span="8"><img src="/pic&video/02_yq.png" alt="" style="width:100%"></van-col>
    </router-link>
   <router-link to="#">
      <van-col span="8"><img src="/pic&video/03_zjk.png" alt="" style="width:100%"></van-col>
   </router-link>
  <router-link to="#">
    <van-col span="8"><img src="/pic&video/04_rm.png" alt="" style="width:100%"></van-col>
  </router-link>
   <router-link to="#">
      <van-col span="8"><img src="/pic&video/05_gf.png" alt="" style="width:100%"></van-col>
   </router-link>
  <router-link to="#">
     <van-col span="8"><img src="/pic&video/06_look.png" alt="" style="width:100%"></van-col>
  </router-link>
 
</van-row>
  </template>
  <!-- <van-notice-bar
  left-icon="volume-o"
  text="北京冬奥组委会提醒:欢迎大家来到2022年北京冬奥会，为了确保您度过一段愉快而安全的时光，请各位人员佩戴好口罩，勤洗手、不聚会、常通风，谢谢配合!"/> -->
    </div>
    <!-- 引入top-floor组件 -->
  <top-floor />
   
  </div>
</template>

<script>

  import 'swiper/css/swiper.css'
import TopFloor from '../components/TopFloor.vue'
  export default {
  components: { TopFloor },
    name: 'swiper-example-multiple-slides-per-biew',
    title: 'Multiple slides per view',
      data() {
      return {
        time:'',
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        slideshow:[]  //存轮播图数据
      }
    },
    methods: {
      SlideShow() {
        this.axios.get('/carousel').then(res=>{
          console.log(res);
          this.slideshow=res.data.results
        })
      }
    },

    mounted () {
      let OldDay=new Date().getTime();
      let NewDay=new Date('2022/02/04 20:00:00').getTime()
      this.time=NewDay-OldDay
      // 
      this.SlideShow()
    },
  }
</script>

<style  scoped>
/* 底部样式 */
.site-footer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 650px;
    background: #fff;

    z-index: 0;
    margin-top:70px;
    }
#bjt{
  background-image:url("/pic&video/bjt.jpg") ;
  width: 100%;
}
#Bimg{
  width: 100%;
}
/* 轮播图css */
.my-swipe .van-swipe-item {

    font-size: 20px;
    text-align: center;
    line-height: 30px;
    margin-top:64px;
    margin-bottom: 10px;
  }
  /* // 倒计时 */
  .colon {
    display: inline-block;
    margin: 0 8px;
    color: #245e9b;
    font-size: 24px;
    text-align: center;
  }
.block {
    display: inline-block;
    color: #245e9b;
    font-size: 20px;
    text-align: center;
  }
.bimg{
    width: 100% !important;
  }
  .span_right{
    position: relative;
  }
  
  .span_right >div{
    position: absolute;
    top:5vw;
    left:49%;
  }
  .swiper >img{
  border-radius: 8px;
  width:120px;
}
.swiper p{
  font-family: "Microsoft Yahei"; 
}
</style>